<template>
  <div class="listItem">
    <ul class="contant">
      <li>
        <el-row class="zuoyou" :gutter="10">
          <el-col class="inner" :span="8" v-for="item in num" :key="item.id">
            <img :src="item.coverImgUrl" alt="">
            <p class="desc">{{item.name}}</p>
            <div class="pos">
              <i class="iconfont">&</i>
              <span>{{item.playCount}}</span>
            </div>
          </el-col>
        </el-row>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'tuijian',
  data () {
    return {
      tuijian: []
    }
  },
  methods: {
    getdata () {
      this.$axios.get('api/top/playlist?limit=30').then(res => {
        console.log(res.data)
        this.tuijian = res.data.playlists
      })
    }
  },
  mounted () {
    this.getdata()
  },
  computed: {
    num () {
      const arr = this.tuijian
      arr.map((val, index) => {
        if (val.playCount > 9999) {
          val.playCount = Math.floor(val.playCount / 10000) + '万'
        }
      })
      return arr
    }

  }
}
</script>
<style lang="stylus" scoped>
.zuoyou
  margin-left: 0px !important
  margin-right: 0px !important
  .inner
    position relative
img
  width 100%
  height 2.28rem
.pos
  position absolute
  right .2rem
  top .1rem
  color white

</style>
